<template>
  <div
    class="selector-wrap"
    :style="[{height:`${height}px`}]"
    ref="wrap">
    <div class="grid">
      <span
        :style="{width:`${unitWitdh*100}%`}"
        v-for="i in gridNum"
        :key="i"/>
    </div>

    <touchBar
      ref="touchBar"
      :time-unit="timeUnit"
      :ex-data="data"
      :time-array="timeArray"
      @done="$emit('done',$event)"
      @change="$emit('change',$event)"/>

    <div
      class="serverData"
      v-for="(item,index) in data"
      :style="{left:`${item.left*100}%`,right:`${item.right*100}%`}"
      :key="index"/>
  </div>
</template>

<script>
import touchBar from './touchBar'
import {getTimePercent} from './utils.js'
export default {
  props: {
    timeArray: {
      type: Array,
      default: () => ['08:00', '21:00']
    },
    timeUnit: {
      type: Number,
      default: 15
    },
    height: {
      type: Number,
      default: 100
    },
    data: {
      type: Array,
      default: () => []
    },
    showGrid: {
      type: Boolean,
      default: true
    }
  },
  components: {
    touchBar
  },
  data () {
    return {
      unitWitdh: 0,
      gridNum: 0,
      itemVisible: true
    }
  },
  watch: {
    data: {
      handler (val) {
        val.forEach(item => {
          item.left = getTimePercent(item.start, this.timeArray)
          item.right = 1 - getTimePercent(item.end, this.timeArray)
        })
      },
      immediate: true
    },
    timeArray: {
      handler (val) {
        let start = val[0].split(':')
        let startTotal = start[0] * 60 + (start[1] - 0)
        let end = val[1].split(':')
        let endTotal = end[0] * 60 + (end[1] - 0)
        let totalTime = endTotal - startTotal
        this.unitWitdh = this.timeUnit / totalTime
        this.gridNum = totalTime / this.timeUnit
      },
      immediate: true
    }
  },
  methods: {
    hideItem () {
      this.$refs.touchBar.itemVisible = false
    },
    showItem () {
      this.$refs.touchBar.itemVisible = true
    }
  }
}
</script>

<style scoped>
.selector-wrap{
  /* background: linear-gradient(to right,transparent 39px, blue 40px); background-size:40px 100% ; */
    height: 100px; position: relative; overflow: hidden;
}
.serverData{
  position: absolute; height: 100%; background: rgba(236, 96, 96, 0.493);top: 0;
}
.grid{
  width: 100%;border-collapse:collapse; position: absolute; height: 100%;top: 0;left: 0;

}
.grid span{
  border-right: 1px solid #ddd;display: inline-block;height: 100%; margin-left: -1px;
}
.grid td:first-child{
  border-left: 1px solid transparent;
}
</style>
